<template>
  <nav class="main-nav" :class="{ 'light-theme': isLightTheme }">
    <div class="nav-brand">
      <i class="material-icons">rocket_launch</i>
      <span> 跨星际高铁教育平台</span>
    </div>
    <div class="nav-menu">
      <router-link 
        v-for="item in menuItems" 
        :key="item"
        :to="getRoutePath(item)"
        class="nav-link"
      >
        {{ item }}
      </router-link>
    </div>
    <div class="nav-controls">
      <div class="theme-switch-container">
        <span class="theme-label">{{ isLightTheme ? '白天' : '黑夜' }}</span>
        <label class="theme-switch">
          <input type="checkbox" v-model="isLightTheme" @change="toggleTheme">
          <span class="slider round"></span>
        </label>
      </div>
      <!-- 新增用户区域 -->
      <div class="user-area">
        <div 
          class="user-avatar"
          @click="goToMyPage"
        >
          <!-- 修改头像路径 -->
          <img src="@/assets/images/profile picture.jpg" alt="用户头像">
        </div>
        <span 
          class="user-text"
          @click="goToMyPage"
        >
          用户
        </span>
        <button 
          class="logout-btn"
          @click="handleLogout"
        >
          <i class="material-icons">logout</i>
          <span>退出</span>
        </button>
      </div>
    </div>
  </nav>

  <!-- 添加确认弹窗组件 -->
  <div v-if="showLogoutConfirm" class="confirm-modal">
    <div class="confirm-box">
      <p v-if="true">您确定要退出吗？</p>
      <div class="confirm-buttons">
        <button @click="confirmLogout" class="confirm-btn confirm-primary">确定</button>
        <button @click="cancelLogout" class="confirm-btn confirm-cancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 引入 useRouter

// eslint-disable-next-line no-undef
const emit = defineEmits(['theme-change']);

const router = useRouter(); // 创建 router 实例
const isLightTheme = ref(false);

// 定义 showLogoutConfirm 变量
const showLogoutConfirm = ref(false);

const toggleTheme = () => {
  emit('theme-change', isLightTheme.value);
  document.body.classList.toggle('light-theme', isLightTheme.value);
};

const menuItems = [
  '首页', '课程管理', '知识点', 
  '题目管理', 'AI生成', '练习',
  '用户管理', '智能教育'
];

const getRoutePath = (item) => {
  const pathMap = {
    '首页': '/home',
    '课程管理': '/courses',
    '知识点': '/knowledge-points',
    '题目管理': '/questions',
    'AI生成': '/ai-generate',
    '练习': '/practice',
    '用户管理': '/user-management', 
    '智能教育': '/smart-preparation'
  };
  return pathMap[item] || '/';
};

// 处理退出逻辑，跳转到 HeroSection 页面
const handleLogout = () => {
  showLogoutConfirm.value = true;
};

const confirmLogout = () => {
  showLogoutConfirm.value = false;
  router.push('/');
};

const cancelLogout = () => {
  showLogoutConfirm.value = false;
};

const goToMyPage = () => {
  router.push('/MyPage'); // 假设 MyPage 页面的路由路径是 /MyPage
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.main-nav {
  font-family: 'Noto Sans SC', sans-serif;
  background: var(--bg-dark);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid #333;
  border-radius: 12px; 
  margin: 0 16px;
  margin-top: 8px; 
}

.main-nav.light-theme {
  background: linear-gradient(135deg, #de72ff, #FFE0B2);
  box-shadow: 0 4px 20px rgba(255, 167, 38, 0.4);
  border: none;
}

.main-nav.light-theme::before {
  display: none;
}

.main-nav.light-theme .nav-brand span,
.main-nav.light-theme .nav-menu a,
.main-nav.light-theme .user-dropdown,
.main-nav.light-theme .theme-label {
  color: #3E2723;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.main-nav.light-theme .nav-menu a {
  border-radius: 25px;
}

.main-nav.light-theme .nav-menu a:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.main-nav.light-theme .nav-brand i {
  color: white;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.nav-menu {
  display: flex;
  gap: 1.5rem;
}

.nav-brand span {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text-dark);
}

.nav-menu a {
  color: var(--text-dark);
  text-decoration: none;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 500;
  font-size: 17px;
  padding: 8px 0;
  transition: opacity 0.3s ease;
}

.user-dropdown {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--text-dark);
}

.nav-menu a:hover {
  opacity: 0.8;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #EEE;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.theme-switch-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-label {
  color: var(--text-dark);
  font-size: 14px;
  font-family: 'Arial', sans-serif;
}

.user-dropdown {
  color: var(--text-dark);
  font-family: 'Arial', sans-serif;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}

.user-dropdown:hover {
  opacity: 0.8;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-brand i {
  font-size: 24px;
  display: flex;
  align-items: center;
  color: #8b5cf6; /* 修改图标颜色 */
}

.nav-brand span,
.nav-menu a,
.user-dropdown,
.theme-label {
  color: var(--text-dark);
}

.main-nav.light-theme .nav-brand span,
.main-nav.light-theme .nav-menu a,
.main-nav.light-theme .user-dropdown,
.main-nav.light-theme .theme-label {
  color: var(--text-light);
}

.user-area {
  display: flex;
  align-items: center;
  background-color: #1a1a1a; /* 深色背景 */
  padding: 4px 12px;
  border-radius: 20px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #8b5cf6; /* 淡紫色边框 */
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-text, .logout-btn span {
  color: white;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 14px;
  margin-left: 8px;
  /* 移除渐变背景 */
  background: none; 
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

.logout-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 16px;
  padding: 0;
}

.logout-btn i {
  color: white;
  font-size: 16px;
}

.logout-btn span {
  margin-left: 4px;
}

/* 新增弹窗样式 */
.confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.confirm-box {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.confirm-box p {
  color: #333;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.confirm-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.confirm-btn {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}

.confirm-primary {
  background-color: #ff4757;
  color: white;
}

.confirm-primary:hover {
  background-color: #ff6b81;
}

.confirm-cancel {
  background-color: #f1f2f6;
  color: #2f3542;
}

.confirm-cancel:hover {
  background-color: #dfe4ea;
}
</style>